<template>
  <div class="rating-select">
    <div class="rating-type">
      <div
        class="item"
        :class="{'active': isActiveNum === item.type, 'all': item.type === 2, 'recommend': item.type === 0, 'negative': item.type === 1}"
        v-for="item in ratingType"
        :key="item.type"
        @click="selected(item.type)"
      >
        {{item.label}}
        <span v-if="item.type === 2">{{allNum}}</span>
        <span v-if="item.type === 0">{{recommendNum}}</span>
        <span v-if="item.type === 1">{{negativeNum}}</span>
      </div>
    </div>
    <div class="line"></div>
    <div class="switch" @click="toggle">
      <span class="icon-check_circle" :class="{'active':onlyContent}"></span>
      <span class="text">只看有内容的评价</span>
    </div>
  </div>
</template>

<script>
const ALL = 2
const RECOMMEND = 0
const NEGATIVE = 1

const EVENT_SELECT = 'select'
const EVENT_TOGGLE = 'toggle'

export default {
  name: 'rating-select',
  props: {
    ratings: {
      type: Array,
      default() {
        return []
      }
    },
    ratingType: {
      type: Array,
      default() {
        return [{
          type: ALL,
          label: '全部'
        }, {
          type: RECOMMEND,
          label: '满意'
        }, {
          type: NEGATIVE,
          label: '不满意'
        }]
      }
    },
    isActiveNum: {
      type: Number,
      default: ALL
    },
    onlyContent: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    allNum() {
      return this.ratings.length
    },
    recommendNum() {
      const count = this.ratings.filter((rating) => {
        return rating.rateType === RECOMMEND
      })
      return count.length
    },
    negativeNum() {
      const count = this.ratings.filter((rating) => {
        return rating.rateType === NEGATIVE
      })
      return count.length
    }
  },
  methods: {
    selected(index) {
      this.$emit(EVENT_SELECT, index)
    },
    toggle() {
      this.$emit(EVENT_TOGGLE)
    }
  }
}
</script>
<style lang='stylus' scoped>
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'

.rating-select
  .rating-type
    display flex
    margin 18px 0
    .item
      min-width 40px
      height 16px
      padding 8px 12px
      margin-right 8px
      line-height 16px
      border-radius 2px
      font-size $fontsize-small
      text-align center
      color $color-text-s
      &.all, &.recommend
        background rgba(0, 160, 220, 0.2)
      &.negative
        background rgba(77, 85, 93, 0.2)
      &.active.all, &.active.recommend
        background $color-blue
        color $color-white
      &.active.negative
        background $color-background-s
        color $color-white
      .count
        margin-left 4px
        font-size 8px
  .line
    border-1px($color=$color-row-line)
  .switch
    display inline-block
    margin 12px 0 0
    .icon-check_circle
      margin-right 4px
      vertical-align middle
      font-size $fontsize-large-xxx
      color $color-text-ss
      &.active
        color $color-green
    .text
      vertical-align middle
      line-height 24px
      font-size $fontsize-medium
      color $color-text-ss
</style>
